<template>
    <div class="coupon_tabs">
        <van-tabs v-model:active="TabActive" type="card" sticky @click-tab="OnTab">
            <van-tab v-for="item in TabList" :title="item.title" :name="item.status"></van-tab>
        </van-tabs>
    </div>

    <!-- 占位 -->
    <div style="height: 60px;"></div>
    
    <div class="coupon_list">
        <van-pull-refresh v-model="refreshing" @refresh="OnRefresh">
            <van-list
                v-model:loading="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="OnLoad"
            >
                <div class="list">
                    <div class="coupon_item" v-for="(item,index) in list">
                        <div class="item_content">
                            <router-link :to="{path:'/coupon/info',query:{cid:item.coupon.id}}">
                                <div class="left">{{ item.coupon.rate * 100 }}<span>折</span></div>
                                <div class="right">
                                    <div>{{ item.coupon.title }}</div>
                                    <div>活动开始时间：{{ item.coupon.createtime_date }}</div>
                                    <div>活动结束时间：{{ item.coupon.endtime_date }}</div>
                                </div>
                            </router-link>
                        </div>
                        <div class="item_btn">
                            <van-button type="primary" class="right_btn" v-if="item.status == 1" @click="ToProduct">去使用</van-button>
                            <van-button type="danger" disabled class="right_btn" v-else>已过期</van-button>
                        </div>
                    </div>

                    <van-back-top :bottom="'80'" />
                </div>
            </van-list>
        </van-pull-refresh>
    </div>

    <Tabbar />
</template>

<script setup>
    const { proxy } = getCurrentInstance();

    const business = proxy.$business;
    // 存放数据
    const list = ref([]);
    // 刷新状态
    const refreshing = ref(false);
    // 懒加载状态
    const loading = ref(false);
    // 上拉加载状态
    const finished = ref(false);
    // 当前页
    const page = ref(1);
    // 数据总条数
    const ListCount = ref(0);
    // tab选中状态
    const TabActive = ref(1);
    // tab数据
    const TabList = ref([
        {
            title:'待使用',
            status:1
        },
        {
            title:'已过期',
            status:0
        }
    ]);

    // 下拉刷新
    const OnRefresh = () =>
    {
        // 清空查询参数
        finished.value = false;
        page.value = 1;
        list.value = [];
        loading.value = true;

        // 加载数据方法
        setTimeout(OnLoad,1500);
    }

    // 上拉加载
    const OnLoad = async () =>
    {
        // 如果等于true说明当前进行下拉刷新
        if(refreshing.value)
        {
            // 结束下拉刷新
            refreshing.value = false;
        }

        // 组装数据
        let params = {
            page:page.value,
            busid:business.value.id,
            status:TabActive.value
        }

        // 发起请求
        let result = await proxy.$http.post({
            url:'/business/coupon',
            params
        })

        // 请求发送完毕后，加载状态也就完毕了
        loading.value = false;

        if(result.code === 1)
        {
            // 合并数组
            list.value = list.value.concat(result.data.list);
            ListCount.value = result.data.count;

            // 如果没有更多数据了，就说明已经加载到底了
            if(list.value.length === ListCount.value)
            {
                finished.value = true;

                return false;
            }

            page.value = page.value + 1;
        }else
        {
            finished.value = true;

            proxy.$fail(result.msg);
        }
    }

    // 领取优惠券
    const ToProduct = () =>
    {
        proxy.$router.push('/product');
    }

    // tab点击事件
    const OnTab = debounce(() =>
    {
        OnRefresh();
    },800)

</script>

<style scoped>
    @import url('/assets/css/CouponIndex.css');
</style>
